<!--
/* 专业软件大屏
 * Author:      huoxj 
 * CreateTime:  2023/2/5 20:36:33 
 * LastEditor:  huoxj 
 * ModifyTime:  2023/12/5 19:29:17 
 * Description: 
*/ 
-->
<template>
  <div class="screen-box">
    <!--  头部  -->
    <div class="screen-header">
      <div style="width: 100%;height:80px;"><img style="width:100%;height:100%;margin-top:16px;" src="/svg/header-software.svg"></div>
      <div class="center-title">数据中心软硬件运行实时监测系统</div>
    </div>

    <div class="position-time">
      <span ref="bottom" style="margin-right: 20px;" class="led-cls gradient-text">{{ time }}</span>
      <FullScreenSetting/>
      <Home/>
    </div>
    <!--  中间部分  -->
    <div class="screen-content">
      <el-row :gutter="2" style="height: 100%">
        <el-col :span="6">
          <dv-border-box-6 :color="colors">
            <SoftLeft width="100%" height="100%" :software="currentSoftware"/>
          </dv-border-box-6>
        </el-col>
        <!--        <el-col :span="4">-->
        <!--          <div style="width: 100%;height: 41vh">-->
        <!--            <dv-border-box-6 :color="colors">-->
        <!--              <SoftLeftTwoBottom width="100%" height="41vh"></SoftLeftTwoBottom>-->
        <!--            </dv-border-box-6>-->
        <!--          </div>-->
        <!--        </el-col>-->

        <el-col :span="12">
          <dv-border-box-6 :color="colors">
            <SoftMap width="100%" height="82vh"/>
          </dv-border-box-6>

          <div class="positionTable">
            <SoftTable width="13vw" @on-change="setSoft" :software="currentSoftware"/>
          </div>

          <div class="positionLeftOne">
            <SoftMapFont />
          </div>

          <!--     定位    -->
          <!-- <div class="positionLeftOne">
            <dv-border-box-6 :color="colors">
              <SoftLeftTwoTop
                width="20vw"
                height="36vh"
                :unit="currentUnit"
                :software="currentSoftware"
                @on-BeforeFullscreen="setLeftOneFullscreen"
              />
            </dv-border-box-6>
          </div> -->

          <!--          <div class="positionLeftTwo" :style="{ zIndex: LeftTwoZIndex }">-->
          <!--            <dv-border-box-6 :color="colors">-->
          <!--              <SoftLeftTwoBottom width="25vw" height="36vh" :unit="currentUnit" :software="currentSoftware" />-->
          <!--            </dv-border-box-6>-->
          <!--          </div>-->
        </el-col>

        <el-col :span="6">
          <div style="width: 100%; height: 50%">
            <dv-border-box-6 :color="colors">
              <SoftRightTop width="100%" height="100%" :software="currentSoftware" :company="company"/>
            </dv-border-box-6>
          </div>

          <div style="width: 100%; height: 50%">
            <dv-border-box-6 :color="colors">
              <SoftRightBottom width="100%" height="100%" :software="currentSoftware" :softwareId="currentSoftwareId" :company="company"/>
            </dv-border-box-6>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-popover :visible="hover" placement="top" width="100vw" offset="-5" popper-class="popClass">
      <div v-show="true" style="height: 8vh; display: flex; justify-content: center; align-items: center"
           @mouseleave="hover = false">
        <!--        <dv-border-box-6 :color="colors" style="width: 90vw">-->
        <SoftFooter
          :dataList="softwareList"
          @on-change="getVal"
          style="background: #000000; border: #15b3f7 2px solid; border-radius: 10px; width: 80vw"
        />
        <!--        </dv-border-box-6>-->
      </div>
      <template #reference>
        <div
          style="height: 2vh; width: 100%; background: #ffffff00; display: flex; justify-content: center; align-items: center"
          @mouseenter="hover = true"
        >
          <svg
            style="height: 2vh; margin-bottom: 50px"
            t="1693451980137"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="39598"
            width="200"
            height="200"
          >
            <path
              d="M512 245.6c57.1 0 85.6-28.6 85.6-85.7S569.1 74.3 512 74.3c-57.1 0-85.6 28.5-85.6 85.6 0 57.1 28.5 85.7 85.6 85.7zM808.7 520c40.4 40.4 80.7 40.4 121.1 0 40.4-40.4 40.4-80.7 0-121.1-40.4-40.3-80.7-40.3-121.1 0.1-40.4 40.3-40.4 80.7 0 121z m-40.3-161.4c40.4-40.4 40.4-80.8 0-121.1-40.4-40.4-80.7-40.4-121.1 0-40.4 40.3-40.4 80.7 0 121.1 40.3 40.4 80.7 40.4 121.1 0zM215.3 520c40.4-40.4 40.4-80.7 0-121.1-40.4-40.3-80.7-40.3-121.1 0.1-40.4 40.3-40.4 80.7 0 121 40.4 40.4 80.8 40.4 121.1 0z m161.4-161.4c40.4-40.4 40.4-80.8 0-121.1-40.4-40.4-80.7-40.4-121.1 0-40.4 40.3-40.4 80.7 0 121.1 40.4 40.4 80.8 40.4 121.1 0zM512 644.9c57.1 0 85.6-28.6 85.6-85.6 0-57.1-28.5-85.7-85.6-85.7-57.1 0-85.6 28.6-85.6 85.7s28.5 85.6 85.6 85.6z m296.7 153.4c-40.4 40.4-40.4 80.7 0 121.1 40.4 40.4 80.7 40.4 121.1 0 40.4-40.3 40.4-80.7 0-121.1-40.4-40.3-80.8-40.3-121.1 0zM768.4 758c40.4-40.4 40.4-80.7 0-121.1-40.4-40.4-80.7-40.4-121.1 0-40.4 40.3-40.4 80.7 0 121.1 40.3 40.4 80.7 40.4 121.1 0zM94.3 798.3c-40.4 40.4-40.4 80.7 0 121.1 40.4 40.4 80.7 40.4 121.1 0 40.4-40.3 40.4-80.7 0-121.1-40.4-40.3-80.8-40.3-121.1 0zM255.6 637c-40.4 40.3-40.4 80.7 0 121.1 40.4 40.3 80.7 40.3 121.1 0 40.4-40.4 40.4-80.7 0-121.1-40.3-40.4-80.7-40.4-121.1 0z"
              fill="#ffffff"
              p-id="39599"
            />
          </svg>
        </div>
      </template>
    </el-popover>
    <!--  尾部  -->
    <!--    <div class="screen-footer" v-show="true">-->
    <!--      <dv-border-box-6 :color="colors" class="screen-footer-main">-->
    <!--        <SoftFooter :width="'100%'" :height="'100%'" :dataList="softwareList" @on-change="getVal" />-->
    <!--      </dv-border-box-6>-->
    <!--    </div>-->
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive} from 'vue';
import {formatToDateTimeAndWeek} from '/@/utils/dateUtil';
import SoftLeft from './softCommon/SoftLeft.vue';
import SoftLeftTwoTop from './softCommon/SoftLeftTwoTop.vue';
import SoftLeftTwoBottom from './softCommon/SoftLeftTwoBottom.vue';
import SoftMap from './softCommon/SoftMap.vue';
import SoftMapFont from './softCommon/SoftMapFont.vue';
import SoftRightTop from './softCommon/SoftRightTop.vue';
import SoftRightBottom from './softCommon/SoftRightBottom.vue';
import SoftFooter from './softCommon/SoftFooter.vue';
import SoftTable from './softCommon/SoftTable.vue';
import FullScreenSetting from '/@/components/AI/FullScreenSetting.vue';
import Home from '/@/components/AI/Home.vue';
import {defHttp} from '/@/utils/http/axios';

const time = ref('yyyy-MM-dd hh:mm:ss');
setInterval((_) => {
  time.value = formatToDateTimeAndWeek();
}, 1000);
const colors = ['#15B3F7', '#5D8FFB'];
const LeftTwoZIndex = ref(10);
const hover = ref(false);
const company = ref('');
// const softwareList = ref([
//   {
//     0: {
//       label: 'db2START',
//       // id:'1',
//       style: {
//         color: '#fff',
//       },
//     },
//     1: {
//       label: 'ora1',
//       // id:'2',
//       style: {
//         color: '#fff',
//       },
//     },
//     2: {
//       label: 'ora2',
//       id: '2',
//       value: 2,
//       style: {
//         color: '#fff',
//       },
//     },
//     3: {
//       label: 'ora3',
//       id: '2',
//       value: 3,
//       style: {
//         color: '#fff',
//       },
//     },
//     4: {
//       label: 'ora4',
//       id: '2',
//       value: 4,
//       style: {
//         color: '#fff',
//       },
//     },
//     5: {
//       label: 'ora5',
//       id: '2',
//       value: 5,
//       style: {
//         color: '#fff',
//       },
//     },
//     6: {
//       label: 'oraEND',
//       id: '2',
//       value: 6,
//       style: {
//         color: '#fff',
//       },
//     },
//   },
//   {
//     0: {
//       label: 'db000',
//       // id:'1',
//       style: {
//         color: '#fff',
//       },
//     },
//     1: {
//       label: 'ora111',
//       // id:'2',
//       style: {
//         color: '#fff',
//       },
//     },
//   },
// ]);
const softwareList = ref([]);

let currentUnit = ref('北京');

const currentSoftware = ref('');
const currentSoftwareId = ref('');

function getVal(v) {
  currentSoftware.value = v ? v.label : '';
  currentSoftwareId.value = v ? v.id : '';
}

function setSoft(row) {
  currentUnit.value = row.name;
}

function setLeftOneFullscreen(isFullscreen) {
  if (isFullscreen) {
    LeftTwoZIndex.value = 0;
  } else {
    LeftTwoZIndex.value = 10;
  }
}

/**
 * 获取最下面的软件列表
 */
const showSoftwareNum = ref(7);
const getSoftListData = () => {
  let params = {
    pageNo: 1,
    pageSize: 1000,
    isshow: 1,
    Is_Deleted: 0
  };
  defHttp.get({url: '/software/querySoftwareList', params}, {isTransformResponse: false}).then((res) => {
    if (res.success) {
      softwareList.value = splitArr(res.result.records, showSoftwareNum.value);
    } else {
      console.log('接口错误用默认');
    }
  });
};

function splitArr(arr, num) {
  var res = [];
  for (var i = 0, len = arr.length; i < len; i += num) {
    var sliceArr = arr.slice(i, i + num);

    var resObj = {};
    for (let j = 0; j < sliceArr.length; j++) {
      resObj[j] = {
        label: sliceArr[j].softwarename,
        id: sliceArr[j].id,
        style: {
          color: '#fff',
        },
      };
    }
    res.push(resObj);
    // res.push(arr.slice(i, i+num));
  }
  return res;
}

getSoftListData();
</script>
<style lang="less">
body {
  background: url('/admin/bg.png');
  background-size: 100% auto;
  overflow: hidden;
}

.screen-box {
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  display: flex;
  flex-direction: column;
}

.screen-header {
  position: relative;
  width: 100%;
  height: calc(10 vh-6px);
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;

  .header-center-decoration {
    width: 60%;
    height: 60px;
    margin-top: 30px;
  }

  .header-left-decoration,
  .header-right-decoration {
    width: 20%;
    height: 60px;
    color: #0415ff;
  }

  .center-title {
    position: absolute;
    font-size: 40px;
    font-weight: bold;
    color: white;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.hearder-font {
  padding-left: 1vw;
}

.screen-content {
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
}

.screen-footer {
  width: 100%;
  height: 8vh;

  .screen-footer-main {
    padding: 20px 40px 20px 40px;
  }
}

.positionLeftOne {
  z-index: 9;
  position: absolute;
  left: 26vw;
  bottom: 3vh;
}

.positionLeftTwo {
  z-index: 10;
  width: 25vw;
  height: 36vh;
  position: absolute;
  left: 26vw;
  bottom: 2vh;
}

.positionTable {
  z-index: 8;
  width: 13vw;
  position: absolute;
  left: 60vw;
  top: 3vh;
}

.position-time {
  z-index: 200;
  position: absolute;
  right: 20px;
  top: 4.2vh;
  font-size: 20px;
  color: white;
}

.popClass {
  background: #ffffff00 !important;
  border: none !important;
}


.led-cls {
  font-family: 'electronicFont';
  font-size: 1.6rem;
  font-weight: bold;
}


.gradient-text {
  background: linear-gradient(to right, #f30404, #fab802fb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
